<template>
  <VPage>
    <el-tabs v-model="activeName" class="h-full info-shop">
      <el-tab-pane label="飞书" name="feishu">
        <Feishu ref="feishu" v-if="loads['feishu']" />
      </el-tab-pane>
      <el-tab-pane label="Amazon" name="amazon">
        <Amazon ref="amazon" v-if="loads['amazon']" />
      </el-tab-pane>
      <el-tab-pane label="亚马逊广告" name="amazon_ad">
        <AmazonAd ref="amazon_ad" v-if="loads['amazon_ad']" />
      </el-tab-pane>
      <el-tab-pane label="eBay" name="ebay">
        <Ebay ref="ebay" v-if="loads['ebay']" />
      </el-tab-pane>
      <el-tab-pane label="OTTO" name="otto">
        <Otto ref="otto" v-if="loads['otto']" />
      </el-tab-pane>
      <el-tab-pane label="Walmart" name="walmart">
        <Walmart ref="walmart" v-if="loads['walmart']" />
      </el-tab-pane>
      <el-tab-pane label="1688" name="1688">
        <A1688 ref="1688" v-if="loads['1688']" />
      </el-tab-pane>
      <el-tab-pane label="赛盒" name="saihe">
        <Saihe ref="saihe" v-if="loads['saihe']" />
      </el-tab-pane>
    </el-tabs>
  </VPage>
</template>
  
<script setup lang="jsx">
import Feishu from './components/Feishu'
import Amazon from './components/Amazon'
import AmazonAd from './components/AmazonAd'
import Ebay from './components/Ebay'
import Otto from './components/Otto'
import Walmart from './components/Walmart'
import A1688 from './components/1688'
import Saihe from './components/Saihe'

const activeName = ref('feishu')
const loads = reactive({ feishu: true })

watch(
  () => activeName.value,
  (val) => {
    if (loads[val]) return
    loads[val] = true
  }, {
  immediate: true
})
</script>

<style lang="scss">
.info-shop {
  .el-tabs__header {
    margin-bottom: 0;
    padding: 0 10px;
  }

  .el-tabs__content {
    height: calc(100% - 40px);
  }

  .el-tab-pane {
    height: 100%;
  }
}
</style>